

 // 0. 获取元素
 const search = document.querySelector('input')
 const box = document.querySelector('.ul1')

 // 1. 给 search 绑定表单输入事件
 search.oninput = function () {
   // 2. 拿到文本框输入的内容
   const text = this.value

   // 3. 根据 text 关键字请求数据了
   // 3-1. 创建一个 script 标签
   const script = document.createElement('script')
   // 3-2. 手动设置 script 标签的 src 属性
   // 设置 script 标签的原生属性 src
   script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34099,33970,34004,33855,33607,26350,22159&wd=' + text + '&req=2&csor=5&pwd=aiqiyi&cb=fn&_=1623047595324'
   // 3-3. 把这个 script 标签插入到 body 内部
   document.body.appendChild(script)
   // 3-4. script 标签的下场
   // 需要他的目的, 是为了利用 src 发送一个请求, 回来以后会执行 js 代码
   // 请求发送出去以后, 就没有用了
   script.remove()
 }

 // 4. 需要在全局准备一个 fn 函数
 function fn(res) {
   // res 就是后端返回给我的数据
   // 我就根据 res 去渲染页面
   console.log(res)

   // 通过判断res 内是否有 g 这个数据
   // 来决定我是否渲染
   if (!res.g) {
     // 代码能执行到这里, 表示 res 内没有 g 这个数据
     // 让 ul 隐藏
     box.style.display = 'none'
     // 直接 return
     return
   }

   // 代码能来到这里
   // 说明 res 内的 g 是一个数组
   // 那么就循环数组渲染到 box 内部
   let str = ''
   res.g.forEach(item => {
     str += `<li>${ item.q }</li>`
   })
   box.innerHTML = str

   // 让 box 显示
   box.style.display = 'block'
 }




// 渲染页面
 // 0. 获取元素
 const BT = document.querySelector('.ba-tu')

ppt()
function ppt(){
  const script = document.createElement('script')
  script.src="https://list.mogu.com/search?callback=fly&_version=8193&ratio=3%3A4&cKey=15&page=7&sort=pop&ad=0&fcid=50240&action=clothing&acm=3.mce.1_10_1ko4s.132244.0.yA8EpsAXgce0V.pos_871-m_482170-sd_119&ptp=31.v5mL0b._head.0.xJD3rJv9&_=1624263213812"
  document.body.appendChild(script)
}
 function fly(res) {
  let str=""

// console.log(res)
const goodsDatas=res.result.wall.docs

  goodsDatas.forEach(function(item){
    str+=`
<div class="tuu">
<div class="dct"><img src="${item.img}"></div>
<h4>${item.title}</h4>
<p>
<span class="price">
<em>￥</em>${item.price}
</span>
<span class="pople">${item.sale}</span>
</p>
<div class="zhe">
<button>查找相识</button>
</div>
</div>
    `
  })


BT.innerHTML=str;
 }


 
    // 1. 给 ol 下面的每一个 li 绑定点击事件
    $('ol1 > li').click(function () {
      // // 1-2. 拿到应该 显示的那个 ul 下面的 li
      // // 拿到自己的索引, 去到 ul 内部查找对对应的
      // // $(this).index() // 自己的索引
      // const li = $('ul > li').eq($(this).index())
      // // 1-3. 拿到这里 li 距离页面顶部的尺寸
      // const top = li.offset().top
      // console.log(top)
      // // 1-4. 让浏览器滚动到指定位置
      // window.scrollTo({
      //   top: top,
      //   behavior: 'smooth'
      // })

      // 修饰之后
      window.scrollTo({
        top: $('.ol1 > li').eq($(this).index()).offset().top,
        behavior: 'smooth'
      })
    })


    // 2. 给 widnow 绑定 scroll 事件
    $(window).scroll(() => {
      // 2-2. 拿到浏览器卷去的高度
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop

      // 2-3. 循环遍历 ul 下面的每一个 li
      for (let i = 0; i < $('.lou > span').length; i++) {
        // 2-4. 判断哪一个 li 的高度小于页面卷去的高度了
        if ($('.lou > span').eq(i).offset().top <= scrollTop) {
          // 2-5. 给对应得 ol 下面的 li 添加类名
          $('.ol1>li').eq(i).addClass('active').siblings().removeClass('active')
        }
      }
    })


    // 3. 回到顶部
    $('.ol1>.db').click(() => {
      // window.scrollTo({ top: 0, behavior: 'smooth' })

      $('html').animate({
        scrollTop: 0
      }, 2000)
    })

//     // 吸顶
// var navtop=document.querySelector('.kuang')

// window.onscroll=function(){
//     var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
//     if(scrollTop>=300){
//         navtop.classList.add('active')
//         // gotop.classList.add('active')

//     }else{
//         navtop.classList.remove('active')
//         // gotop.classList.remove('active')
//     }

// }
// window.onscroll=function(){
//   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
//   if(scrollTop>=$('.cnxh').offset().top){
//      $('.kuang').addClass('active')
//   }else{
//       $('.kuang').removeClass('active')
  
//   }

// }

// / 首页的逻辑

const id = window.localStorage.getItem('id')

// 1. 登录验证
loginTest()
function loginTest() {
  // 1-1. 拿到 localStorage 内的信息
  const token = window.localStorage.getItem('token')
  const onBox = document.querySelector('.on')
  const offBox = document.querySelector('.off')

  // 1-2. 判断 id 和 token 是否存在
  if (!id || !token) return

  // 1-3. 验证 token 的真实性
  // 发送一个需要 token 的请求
  // 因为刚好需要用到用户的个人信息
  ajax({
    url: 'http://localhost:8888/users/info',
    data: `id=${id}`,
    token: token,
    dataType: 'json',
    success (res) {
      // 1-4. 只有登录成功的时候, 才显示 onBox
      if (res.code === 1) {
        // 1-5. 修改一下文本内容
        onBox.firstElementChild.innerText = res.info.nickname
        onBox.classList.add('active')
        offBox.classList.remove('active')
      }
    }
  })
}

// 跳转到列表页
const tz = document.querySelectorAll('.wu>.wu_zuo>ul>li>.wu_zuo_div>ul>li')
for(let i = 0; i < tz.length; i++) {

tz[i].addEventListener('click', e => {
  e = e || window.event
  const target = e.target || e.srcElement
  if (target.tagName === 'LI') {
    window.location.href = "./list.html"
  }
})
}

